<template>
  <view
    class="shopro-empty-wrap u-flex-col u-row-center u-col-center"
    :style="{ 'margin-top': marginTop }"
  >
    <image class="empty-img" :src="image" mode="widthFix"></image>
    <view class="empty-text u-tips-color u-font-26">{{ tipText }}</view>
    <view class="btn-box u-m-t-100" v-if="btnText">
      <button
        class="u-reset-button empty-btn"
        :style="customStyle"
        hover-class="none"
        @tap="onBtn"
      >
        {{ btnText }}
      </button>
    </view>
  </view>
</template>

<script>
/**
 * shoproEmpty- 数据为空页
 * @property {String} image - 空白图。
 * @property {String} tipText - 提示语。
 * @property {String} btnText - 按钮文字。
 * @property {String} marginTop - 距离父级距离。
 * @property {Object} customStyle - 自定义按钮样式。
 * @event {Fuction} click - 点击按钮
 */
export default {
  name: 'shoproEmpty',
  props: {
    image: {
      type: [String, null],
      default: '/static/images/empty_network.png',
    },
    tipText: {
      type: String,
      default: '',
    },
    btnText: {
      type: String,
      default: '',
    },
    marginTop: {
      type: String,
      default: '20%',
    },
    customStyle: {
      type: Object,
      default: () => {
        return {
          width: '200rpx',
          height: '70rpx',
          background:
            'linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1))',
          borderRradius: '35rpx',
          fontSize: '28rpx',
          color: '#fff',
          border: 0,
        };
      },
    },
  },
  methods: {
    onBtn() {
      this.$emit('click');
    },
  },
};
</script>

<style lang="scss" scoped>
.shopro-empty-wrap {
}
.empty-img {
  width: 540rpx;
}
.empty-btn {
  line-height: 74rpx;
  font-size: 24rpx;
  font-family: PingFang SC-Heavy, PingFang SC;
  font-weight: 800;
  color: #958cf0;
  width: 214rpx;
  height: 74rpx;
  border-radius: 39rpx 39rpx 39rpx 39rpx;
  opacity: 1;
  border: 2rpx solid #958cf0;
  text-align: center;
}
.empty-text {
  margin-top: 100rpx;
}
</style>
